<template>

    <el-form :inline="true" :model="formData" class="demo-form-inline">
        <el-form-item>
            <el-input v-model="formData.nickName" placeholder="请输入关键字" clearable @change="callApi" />
        </el-form-item>
        <el-form-item>
            <el-input v-model="formData.tel" placeholder="请输入手机号" clearable @change="callApi" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed prop="id" label="id" width="100" />
        <el-table-column prop="nickName" label="昵称" width="150" />
        <el-table-column prop="tel" label="电话" width="200" />
        <el-table-column prop="email" label="email" width="200" />
        <el-table-column prop="department.id" label="部门" width="100" />
        <el-table-column prop="department.name" label="部门名称" width="150" />
        <el-table-column prop="roles" label="角色" width="300">
    <template #default="scope">
        <div v-if="Array.isArray(scope.row.roles) && scope.row.roles.length > 0">
            <el-tag
                v-for="role in scope.row.roles"
                :key="role.id"
                type="success"
                size="small"
                style="width:200px;">
                {{ role.name }}
            </el-tag>
        </div>
        <span v-else>无角色</span>
    </template>
</el-table-column>
        <el-table-column prop="lastUpdateBy" label="更新人" width="120" :formatter="formatter" />
        <el-table-column prop="lastUpdateTime" label="更新时间" width="160" :formatter="formatter" />
        <el-table-column fixed="right" label="Operations" min-width="140">
            <template #default="scope">
                <el-button type="primary" size="small" @click="edit(scope.row)">编辑</el-button>
            </template>
        </el-table-column>

    </el-table>
    <el-pagination background layout="total, prev, pager, next" :total="pageData.total" :page-size="pageData.pageSize"
        @current-change="pageChange">
    </el-pagination>
    <el-drawer v-model="drawer" title="编辑" :with-header="false" size="70%">
        <el-form :model="formData2" ref="form2Ref">
            <el-form-item label="电话">
                <el-input v-model="formData2.tel" />
            </el-form-item>
            <el-form-item label="昵称">
                <el-input v-model="formData2.nickName" />
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="formData2.email" />
            </el-form-item>
            <p></p>

        </el-form>
        <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">
            Check all
        </el-checkbox>
        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="role in formData2.roles" :key="role.id" :label="role.name" :value="role.id">
                {{ role.name }}
            </el-checkbox>
        </el-checkbox-group>
        <el-form-item>
            <el-button type="primary" @click="submitForm()">提交</el-button>
        </el-form-item>
    </el-drawer>

</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, watch } from 'vue'
import { rolesApi, userApi, userRolesApi } from '@/api';
import { dayjs, ElMessageBox, ElMessage, rowContextKey } from 'element-plus'
import { useRouter } from 'vue-router'

const isIndeterminate = ref(true)
const checkAll = ref(false)
const checkedCities = ref<any>([])
const roles = ref([])
const formData = reactive({
    nickName: '',
    tel: '',
})
const drawer = ref(false)
const pageData = reactive({
    total: 0,
    pageSize: 5,
    pageNum: 1

})
const form2Ref = ref()
const router = useRouter()
const tableData = ref<any>([])
const formData2 = reactive({
    id: '',
    nickName: '',
    tel: '',
    email: '',
    roles:<any> []
})

const callRoles = () => {
    rolesApi.select.call().then(res => {
        formData2.roles = res.map((item: any) => {
      return {
        id: item.id,
        name: item.name
      }

    })
        roles.value = res.map((item: any) => item.id)
        console.log(res)
    })
 
}
const handleCheckAllChange = (val: boolean) => {
  checkedCities.value = val ? roles.value : []
  isIndeterminate.value = false
}
const handleCheckedCitiesChange = (value: string[]) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === roles.value.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < roles.value.length
}
const edit = (row: any) => {
    userApi.select.call({ id: row.id }).then(res => {
        res = res[0]
        drawer.value = true
        formData2.id = res.id
        formData2.nickName = res.nickName
        formData2.tel = res.tel
        formData2.email = res.email
    })
    userRolesApi.select.call({ userId: row.id }).then(res => {
        checkedCities.value = res.map((item: any) => item.roleId)
    })

}
const submitForm = () => {
    let params = {
        id: formData2.id,
        tel: formData2.tel,
        email: formData2.email,
        nickName: formData2.nickName
    }
    console.log(params)
    userApi.update.call(params).then(res => {
        ElMessage.success(res.message)
        drawer.value = false
        callApi()
    })

    userRolesApi.add.call({ userId: formData2.id, roleId: checkedCities.value })

}
const pageChange = (pageNum: number) => {
    pageData.pageNum = pageNum
    callApi()
}


const callApi = async () => {
    let params = {
        pageNum: pageData.pageNum,
        pageSize: pageData.pageSize,
        nickName: formData.nickName === "" ? undefined : formData.nickName,
        tel: formData.tel === "" ? undefined : formData.tel,
    };

    userApi.select.call(params).then(res => {

        pageData.total = res.count
        tableData.value = res.items
        console.log(res)
    })
    callRoles();
};

onMounted(() => {
    callApi()

})

const onSubmit = () => {
    callApi()
}
const formatter = (row: any, column: any, cellValue: any, index: number) => {

    if (column.property === 'lastUpdateTime') {
        return dayjs(cellValue).format('YY年MM月DD HH:mm')
    } else if (column.property === 'lastUpdateBy') {
        return cellValue
    }

    return cellValue
}

</script>